define(function(require) {
  // load third-party javascript libraries
  var $ = require('jquery'),
      _ = require('underscore'),
      Backbone = require('backbone'),
  	  Selectize = require('selectize');

  // user-defined modules
  var TranscriptCollection = require('collections/transcripts');

  // define view
  var SelectTranscriptsView = Backbone.View.extend({

    initialize: function(options) {
      var self = this;
      // need to store the parent SelectStudyView
      self.parentView = options.parentView;
      self.selectedItems = options.selectedItems;
      // events
      self.listenTo(self.parentView, 'change', self.onChangeStudy);
      // initialize the view as an empty selectize.js control
      self.render();
      var selectize = self.$el[0].selectize;
      selectize.disable();
    },

    render: function() {
      var self = this;
      // initialize the selectize control
      var $el = self.$el.selectize({
        valueField: '_id',
        searchField: ['name', 'locus', 'nearest_gene_names', 'nearest_gene_ids'], 
        maxItems: 100,
        maxOptions: 1000,
        preload: false,
        render: {
            item: function(data, escape) {
              return '<div><span><strong>' + escape(data.name) + '</strong> (' + 
                   escape(data.gene_id) + ') <em>' + escape(data.category) + '</em></span></br>' + 
                   '<span>' + escape(data.nearest_gene_names) + '</span></br>' +
                   '<span>' + escape(data.locus) + '</span></div>';
            },
            option: function(data, escape) {
              return '<div><span><strong>' + escape(data.name) + '</strong> (' + 
                   escape(data.gene_id) + ') <em>' + escape(data.category) + '</em></span></br>' + 
                   '<span>' + escape(data.nearest_gene_names) + '</span></br>' +
                   '<span>' + escape(data.locus) + '</span></div>';
            }
        },
        load: function(query, callback) {
          // ensure user has typed something
          if (!query.length) return callback();
          study = self.parentView.currentStudy();
          // issue ajax call
          $.ajax({
              url: '/transcripts',
              type: 'post',
              contentType: 'application/json',
              dataType: 'json',
              data: JSON.stringify({ study: study.get('_id'), query: query }),
              error: function() {
                console.warning('ajax error: load transcripts');
                callback(); 
              },
              success: function(response) {
                callback(response.results);
              }
          });
        },
        onItemAdd: function(value, $item) {
          console.log('item add ' + value);
          // get data associated with option
          itemData = this.options[value];
          self.selectedItems.add(itemData);
        },
        onItemRemove: function(value) {
          console.log('item remove ' + value);
          // get data associated with option
          model = self.selectedItems.get(value);
          self.selectedItems.remove(model);
        },
        onClear: function() {
          self.selectedItems.clear();
        }        
      });
      var selectize = $el[0].selectize;
      selectize.enable();
      return self;
    },

    onChangeStudy: function(study) {
      var self = this;
      // destroy the selectize instance
      var selectize = self.$el[0].selectize;
      selectize.clearOptions();
      selectize.destroy();
      // render
      this.render();
    }

  });

  return SelectTranscriptsView;
});